<style>
.btn {
  display: inline-block;
  margin-left: 20px;
  margin-top: 3px;
  padding: 6px 20px;
  border-radius: 4px;
  background-color: #255da8;
  color: #fff;
  cursor: pointer;
}
</style>
<template>
    <div style="width:100%;">
        <div style="width:100%;padding-top:35px;">
            <div style="background-color: #fff;margin:0px 35px;width: calc(100%  - 80px);">
                <div style="display:flex;flex-direction: row;justify-content:space-between; align-items:center;">
                    <div style="font-weight: 700;color: #00192f;font-size:20px;padding:18px 30px;" class="pointer">交易详情</div>
                    <div class="btn" @click="output()" style="margin-right:30px;">
                        <span class="glyphicon glyphicon-plus" style="margin-right: 2px;"></span>导出交易详情
                    </div>
                </div>
                <div style="border: 1px solid #d9dcdf;" class="pointer">
                    <el-table
                    height="482"
                        :data="orderList"
                        border
                        style="width: 100%">
                        <el-table-column
                        prop="time"
                        label="日期">
                        </el-table-column>
                        <el-table-column
                        prop="tradenumber"
                        label="交易编号">
                        </el-table-column>
                        <el-table-column
                        prop="stockNumber"
                        label="股票代码">
                        </el-table-column>
                        <el-table-column
                        prop="ordertype"
                        label="交易类型">
                          <template slot-scope="scope">
                            <div v-if="scope.row.ordertype === 1">买</div>
                            <div v-if="scope.row.ordertype === 2">卖</div>
                          </template>
                        </el-table-column>
                        <el-table-column
                        prop="type"
                        label="下单类型">
                          <template slot-scope="scope">
                            <div v-if="scope.row.type === 1">市价单</div>
                            <div v-if="scope.row.type === 2">县价单</div>
                          </template>
                        </el-table-column>
                        <el-table-column
                        prop="volume"
                        label="交易额">
                        </el-table-column>
                        <el-table-column
                        prop="entrusnumber"
                        label="成交数量">
                        </el-table-column>
                        <el-table-column
                        prop="servicecharge"
                        label="手续费">
                        </el-table-column>
                        <el-table-column
                        prop="profit"
                        label="盈亏">
                        </el-table-column>
                    </el-table>
                    <div class="page" style="margin:12px 12px 20px 0px;">
                        <Pagination :Current.sync="Current" :limit="limit" :totalCount="totalCount" @turn="getTradeOrder"></Pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Pagination  from './../../zujian/Pagination'
export default {
  components: {
    Pagination
  },
    data () {
        return{
            orderList:[],
            Current: 1,
            limit: 9,
            totalCount: 100,
        }
    },
    mounted () {
        this.inrecordId = localStorage.getItem('inrecordId')
        this.SessionToken = localStorage.getItem('SessionToken')
        this.getTradeOrder()
    },
    methods:{
        // 获取下单详情
        getTradeOrder(){
            this.$http.get('getInOrderPageByRecordId?sessionToken='+this.SessionToken+'&recordId='+this.inrecordId+'&pageIndex='+this.Current+'&pageSize='+this.limit+'').then((resp) => {
                if (resp.data.status === 200) {
                    this.totalCount = resp.data.data.total
                    if(this.totalCount !== 0){
                        this.orderList = resp.data.data.list
                    }
                console.log(resp.data)
                } else {
                this.$message.error(resp.data.msg)
                }
            })
        },
        output(){
            window.open('http://103.46.128.49:21502/export?sessionToken='+this.SessionToken+'&recordId='+this.inrecordId+'')
        }
    }
    
}
</script>
                